替客戶設計響應式斷點?

• 眼球看東西的區域有限，所以一般設計網頁，中間區塊還是會固定一個尺寸(如下方"背景滿版，內容設定寬度水平置中範例")
  • 常見的解析度(中間區塊): 960px、1000px、1440px(較少)
  • 由於太多圖片一次下載網頁會頓頓的，所以通常不會版開太大(例如: 1920px)
• 有舊網站時，先套Google 分析觀察數據
• 如果沒有，以最熱門的解析度為主
  • statcounter:可查詢各國目前瀏覽器與裝置的趨勢

Desktop first 範例

• CSS順序: 桌機→平板→手機
• media query呈現方式會是max-width
• .wrap設定max-width

Mobile first 範例

• CSS順序: 手機→平板→桌機
• media query呈現方式會是min-width
• .wrap不設寬度

※ 哪個瀏覽器先寫在前方，那個設備的靈活度會是最高的，所以做網站前要先了解此網站的瀏覽者pc多或手機多，再從此設備先寫起

如果先從 PC 做的話，PC 在建構上會比較彈性，而手機若是要新增樣式就會局現在因為是 PC 先做，導致手機要做額外樣式就會受限於 PC 的關係而綁手綁腳。畢竟手機是 藉由 PC原本樣式而慢慢覆蓋，自然彈性就較小。
結論就是先做哪個版本，該版本就比較靈活，而被覆蓋後才產生出來的樣式就會因此而受限。原文出處-六角學院課程問答區

網頁中背景滿版，內容設定寬度水平置中方式

• 範例
• 設定header背景色，呈現滿版自適應
  • 因為沒設定wrap所以header就會跟著body做自適應延伸
• 內容不想自適應延伸至滿版，可設定.container 如下
  • html中套上class container的區域就會寬度固定於768px並水平置中

.container {
    width: 768px;
    margin: 0 auto;
}

• 自我練習 範例
  • header區塊加入logo與menu(注意clearfix部分)
  • contain與footer，呈現背景滿版內容區塊限制於特定範圍

六角講師斷點設計分享 原出處

iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (視專案族群)
iPhone 6 - 375px (視專案族群)
iPhone 5、SE - 320px
/
有學生應該會很好奇，
為什麼 還會有一個 767px 的斷點，
因為通常 iPad 直式 是 Android、IOS 平版很常見的大小，
再接著 767px~320px 我便會視為他們都是手機 size，
所以在 767 px 以下時就會直接把他變成手機版型，
畢竟 767px~6xx size 相當少見，一開始各位學生可以先確保一些熱門斷點上優化即可，
至少可以滿足 80% 以上的客戶，
不用太吹毛求疵，當然你力求優化的話也是 ok 的。

再來 320px 是你最小需要注意的 SIZE，
現在仍然有許多手機是 320px，尤其是小 size 的 iPhone，
以前甚至有 240px 的手機，但現在已經相當稀有了。

所以如果是 PC 做到手機的話，語法就會有點像是這樣：

.wrap{
  max-width: 960px;
}
.header {
  height: 80px;
}
.list li{
  width: 33%;
}
.list h3{
  font-size: 24px;
}
@media(max-width: 768px){
  .header{
    height: auto;
  }
  .list li{
    width: 48%;
    margin: 0 1%;
  }
}
@media(max-width: 767px){
  .list li{
    width: 98%;
  }
}
@media(max-width: 414px){
  .list li{
    font-size: 18px;
  }
}